<template>
  <div class="app-container">
    <el-card shadow="always">
      <el-row>
        <div class="one_button">
          <el-col class="right_button">
            <el-button type="success" icon="el-icon-edit" size="small" @click="addEnterprise">新增用户</el-button>
          </el-col>
        </div>

        <div class="thrid_row">
          <el-col class="left_input">
            <span>标签名称</span>
            <el-input v-model="searchData.tags" class="catalogue" />
          </el-col>
          <div class="four_row">
            <el-col class="left_input">
              <span>城市</span>
              <el-select
                v-model.trim="form.provinces"
                placeholder="请选择"
                class="select_one"
                @change="changeFn"
              >
                <el-option
                  v-for="(item, index) in provincesList"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
              <el-select v-model="form.citys" placeholder="请选择" class="select_one">
                <el-option
                  v-for="(item, index) in citysList"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-col>
          </div>
          <el-col class="left_input">
            <span>企业简称</span>
            <el-input v-model="searchData.shortName" class="catalogue" />
          </el-col>

          <div class="two_button">
            <el-button @click="clearClick">清除</el-button>
            <el-button type="primary" @click="searchEnterprise">搜索</el-button>
          </div>
        </div>

      </el-row>
      <div class="alert" closable="false">
        <el-alert :closable="false" :title="`数据一共${page.counts}条`" type="info" show-icon />
      </div>
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="number" label="企业编号" width="180" />
        <el-table-column prop="shortName" label="企业简称" width="180" />
        <el-table-column prop="tags" label="标签" />
        <el-table-column prop="creatorID" label="创建者" />
        <el-table-column prop="addDate" label="创建日期">
          <template v-slot="{row}">
            {{ row.addDate | formatDate }}
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注" />
        <el-table-column prop="state" label="状态" />
        <el-table-column label="操作" sortable="" fixed="right" width="250">
          <template v-slot="{row}">
            <el-button type="success" size="small" icon="el-icon-edit" circle @click="editEnterprise(row)" />
            <el-button type="danger" size="small" icon="el-icon-delete" circle @click="deleteEnterprise(row)" />
            <el-button v-if="abled" type="warning" size="small" icon="el-icon-check" circle @click="enterpriseState(row)" />
            <el-button v-else type="warning" size="small" icon="el-icon-close" circle @click="enterpriseState(row)" />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 放置分页组件 -->
    <el-row type="flex" justify="center" align="middle" style="height:60px">
      <el-pagination
        :current-page="page.page*1"
        :page-size="page.pagesize*1"
        :total="page.counts"
        layout="prev,pager,next"
        @current-change="changePage"
      />
    </el-row>
    <EnterpriseDialog ref="EnterpriseDialogRef" :is-enterprise-dialog.sync="isEnterpriseDialog" :edit-date="editDate" :row-id="rowId" />
  </div>
</template>
<script>
import { provinces, citys } from '@/assets/city'
import { enterpriseListAPI, enterpriseStateAPI, deleteEnterpriseAPI } from '@/api/index'
import EnterpriseDialog from './components/enterprise-dialog.vue'
export default {
  name: 'TableLayout',
	components: {
		EnterpriseDialog
	},
  data() {
    return {
      provincesList: provinces(), // 城市
      citysList: [], // 地区
      form: {
        provinces: '', // 城市
        citys: '' // 地区
      },
      activeNames: '',
      ruleForm: {},
      tableData: [],
			page: { // 声明一个对象，保存分页的数据
				page: 1,
				pagesize: 10,
				counts: 0,
				keyword: '',
				pages: 1
			},

			rowId: 0,
			isEnterpriseDialog: false, // 控制弹出层的显示
			editDate: {},
			abled: true,
			// 记录搜索功能的信息
			searchData: {
				tags: '',
				province: '',
				city: '',
				shortName: ''
			}
    }
  },
	created() {
		this.getEnterpriseList()
	},
  methods: {
		//  选择城市的方法
    changeFn() {
      // 获取地区赋值给本地
      this.citysList = citys(this.form.provinces)
    },

		// 请求企业管理的列表数据
		async getEnterpriseList() {
			const res = await enterpriseListAPI(this.page)
			const { counts, pagesize, pages, page, items } = res
			this.page.page = page
			this.page.pagesize = pagesize
			this.page.counts = counts
			this.page.pages = pages
			this.tableData = items
			this.tableData.forEach(item => {
				if (item.state === 1) {
					item.state = '开启'
				} else {
					item.state = '禁用'
				}
			})
		},

		// 点击分页按钮，切换分页
		changePage(newpage) {
			this.page.page = newpage
			this.getEnterpriseList()
		},
		// 点击新增按钮，新增企业
		addEnterprise() {
			this.isEnterpriseDialog = true
			this.editDate = null

		},
		// 点击编辑按钮，编辑企业
		editEnterprise(row) {
			console.log(row);
			// 实现数据回显
			this.$refs.EnterpriseDialogRef.formData = row
			this.$refs.EnterpriseDialogRef.formData.isFamous = false
			this.$refs.EnterpriseDialogRef.form.provinces = row.province
			this.$refs.EnterpriseDialogRef.form.citys = row.city
			// 传递id和行数据
			this.rowId = row.id
			this.editDate = row
			this.isEnterpriseDialog = true
		},
		// 点击修改状态的按钮，实现禁用启用
		async enterpriseState(row) {
			if (row.state === '开启') {
				await this.$confirm('确定要禁用该企业吗？')
				// eslint-disable-next-line require-atomic-updates
				row.state = '禁用'
				this.abled = false
			} else {
				row.state = '开启'
				this.abled = true
			}
			// 通过判断当前的状态情况，调用保存状态的接口。防止页面刷新，状态还原的问题
			if (row.state === '开启') {
				await enterpriseStateAPI(row.id, 1)
			} else {
				await enterpriseStateAPI(row.id, 0)
			}
		},
		// 点击删除按钮，删除企业
		async deleteEnterprise(row) {
			try {
				await this.$confirm('确定要删除该企业吗？')
				await deleteEnterpriseAPI(row)
				this.getEnterpriseList()
				this.$message.success('删除成功!')
			} catch (err) {
				console.log(err);
			}
		},
		// 点击搜索按钮，搜索相关的企业
		async	searchEnterprise() {
			this.searchData.province = this.form.provinces
			this.searchData.city = this.form.citys
			const res = await enterpriseListAPI({
				tags: this.searchData.tags,
				province: this.searchData.province,
				citys: this.searchData.city,
				shortName: this.searchData.shortName
			})
			const { counts, pagesize, pages, page, items } = res
			this.page.page = page
			this.page.pagesize = pagesize
			this.page.counts = counts
			this.tableData = items
		},
		// 点击清除，清除搜索框中的信息
		clearClick() {
			this.searchData = {
				tags: '',
				shortName: ''
			}
			this.form = {
        provinces: '', // 城市
        citys: '' // 地区
      }
		}
  }
}
</script>

<style lang='scss' scoped>
.app-container{
	padding: 15px;
}
::v-deep .el-card__body{
	padding-top: 3px;
}
.one_button{
	width: 100%;
	height: 50px;
	line-height: 50px;
	padding-right: 22px;
}
.left_input{
	float: left;
	width: 260px;
	span{
		font-size: 15px;
		font-weight: normal;
	}
}
span{
	font-weight: 600;
	margin-right: 20px;
}
::v-deep .el-input{
	width: 200px;
	height: 50px;
}
.right_select{
	float: left;
	width: 260px;
}
.right_select span{
	font-size: 15px;
	font-weight: normal;
}
.right_button{
	float: right;
	width: 32px;
	margin-right: 80px;
}
::v-deep .el-input__inner{
	height: 30px;
}
::v-deep .el-select__caret{
	line-height: 30px;
}
.first_row{
	width: 100%;
	height: 50px;
	line-height: 50px;
	.right_select, .left_input{
		width: 25%;
		height: 50px !important;
		span{
			display: inline-block;
			width: 60px;
			height: 50px;
			text-align: right;
		}
	}
}
.two_row{
	width: 100%;
	height: 50px;
		line-height: 50px;

	.right_select, .left_input{
		float: left;
		width: 25%;
		height: 50px !important;
		span{
			display: inline-block;
			width: 60px;
			height: 50px;
			text-align: right;
		}
	}
}
.thrid_row{
	overflow: hidden;
	width: 100%;
	height: 50px;
	line-height: 50px;
	margin-bottom: 10px;
	.right_select, .left_input{
		float: left;
		width: 25%;
		height: 50px !important;
		span{
			display: inline-block;
			width: 60px;
			height: 50px;
			text-align: right;
		}
	}
}
.four_row{
	width: 28%;
	height: 50px;
	float: left;
	.left_input{
		float: left;
		width: 100%;
		.select_one, .select_two{
			width: 100px;
			margin-right: 4px;
			::v-deep .el-input{
				width: 100px !important;
			::v-deep .el-input__inner{
				width: 100px !important;
			}
			}
		}
	}
}
.two_button{
	width: 160px;
	height: 50px;
	float: right;
	margin-right: 27px;
}
.el-button--danger {
	color: #f56c6c;
	background: #fef0f0;
	border-color: #fbc4c4;
}
.el-button--warning {
	color: #e6a23c;
	background: #fdf6ec;
	border-color: #f5dab1;
}
</style>

